<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bid Analysis 2023</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 8%; /* 页面占满整个视口 */
            font-family: Arial, sans-serif;
        }
        .main-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr; /* 三等分列，横向排列 */
            grid-gap: 10px;
            height: 6px;
        }
        .chart {
            background: #f0f0f0;
            padding: 10px;
            border-radius: 10px;
            height: 10%;
            width: 100%;
        }
        h1 {
            text-align: center;
            margin-top: 0;
        }
    </style>
</head>
<body>
    <h1>2023京津冀三地中标数据可视化大屏</h1>
    <div class="main-container">
        <div class="chart-container">
            <a href="reg1a/list/" target="_blank">
                <canvas id="region1_amount_chart" class="chart"></canvas>
            </a>
            <a href="reg2a/list/" target="_blank">
            <canvas id="region2_amount_chart" class="chart"></canvas>
            </a>
            <a href="reg3a/list/" target="_blank">
            <canvas id="region3_amount_chart" class="chart"></canvas>
            </a>
            <a href="reg12a/list/" target="_blank">
            <canvas id="region_monthly_amount_chart" class="chart"></canvas>
            </a>
        </div>
        <div class="center-columns">
            <a href="reg_all_c/list/" target="_blank">
            <canvas id="regionproject_count_data" class="chart"></canvas>
            </a>
            <a href="reg_all_a/list/" target="_blank">
            <canvas id="regionawardamount_data" class="chart"></canvas>
            </a>
        </div>
        <div class="chart-container1">
            <a href="reg1c/list/" target="_blank">
            <canvas id="region1_count_chart" class="chart"></canvas>
            </a>
            <a href="reg2c/list/" target="_blank">
            <canvas id="region2_count_chart" class="chart"></canvas>
            </a>
            <a href="reg3c/list/" target="_blank">
            <canvas id="region3_count_chart" class="chart"></canvas>
            </a>
            <a href="reg12c/list/" target="_blank">
            <canvas id="region_monthly_count_chart" class="chart"></canvas>
            </a>
        </div>
    </div>

    <script>
function createRegionalChart1(id, data, type, label) {
    console.log(id, data);
    const ctx = document.getElementById(id).getContext('2d');

    // 创建图表
    const chart = new Chart(ctx, {
        type: type, // 图表类型
        data: {
            labels: data.map(item => item.month), // X 轴标签，取自 data 的 month 属性
            datasets: [{
                label: label, // 数据集的标签
                data: data.map(item => {
                    // 根据数据类型（金额或数量）返回相应的值
                    return parseFloat(item.hasOwnProperty('award_amount') ? item.award_amount : item.award_count);
                }),
                backgroundColor: 'rgba(75, 192, 192, 0.2)', // 柱状图背景颜色
                borderColor: 'rgba(75, 192, 192, 1)', // 柱状图边框颜色
                borderWidth: 1 // 边框宽度
            }]
        },
        options: {
            // 配置图表的标题
            plugins: {
                title: {
                    display: true, // 是否显示标题
                    text: "2023年北京每月中标金额分布", // 标题文本，使用传入的 label 作为标题
                    font: {
                        size: 50, // 字体大小
                        weight: 'bold' // 字体粗细
                    },
                    padding: {
                        top: 20, // 标题顶部留白
                        bottom: 20 // 标题底部留白
                    },
                    color: 'black' // 标题文本颜色
                }
            },
            scales: {
                y: {
                    beginAtZero: true // Y 轴从 0 开始
                }
            }
        }
    });
}
function createRegionalChart2(id, data, type, label) {
    console.log(id, data);
    const ctx = document.getElementById(id).getContext('2d');

    // 创建图表
    const chart = new Chart(ctx, {
        type: type, // 图表类型
        data: {
            labels: data.map(item => item.month), // X 轴标签，取自 data 的 month 属性
            datasets: [{
                label: label, // 数据集的标签
                data: data.map(item => {
                    // 根据数据类型（金额或数量）返回相应的值
                    return parseFloat(item.hasOwnProperty('award_amount') ? item.award_amount : item.award_count);
                }),
                backgroundColor: 'rgba(75, 192, 192, 0.2)', // 柱状图背景颜色
                borderColor: 'rgba(75, 192, 192, 1)', // 柱状图边框颜色
                borderWidth: 1 // 边框宽度
            }]
        },
        options: {
            // 配置图表的标题
            plugins: {
                title: {
                    display: true, // 是否显示标题
                    text: "2023年天津每月中标金额分布", // 标题文本，使用传入的 label 作为标题
                    font: {
                        size: 50, // 字体大小
                        weight: 'bold' // 字体粗细
                    },
                    padding: {
                        top: 20, // 标题顶部留白
                        bottom: 20 // 标题底部留白
                    },
                    color: 'black' // 标题文本颜色
                }
            },
            scales: {
                y: {
                    beginAtZero: true // Y 轴从 0 开始
                }
            }
        }
    });
}
function createRegionalChart3(id, data, type, label) {
    console.log(id, data);
    const ctx = document.getElementById(id).getContext('2d');

    // 创建图表
    const chart = new Chart(ctx, {
        type: type, // 图表类型
        data: {
            labels: data.map(item => item.month), // X 轴标签，取自 data 的 month 属性
            datasets: [{
                label: label, // 数据集的标签
                data: data.map(item => {
                    // 根据数据类型（金额或数量）返回相应的值
                    return parseFloat(item.hasOwnProperty('award_amount') ? item.award_amount : item.award_count);
                }),
                backgroundColor: 'rgba(75, 192, 192, 0.2)', // 柱状图背景颜色
                borderColor: 'rgba(75, 192, 192, 1)', // 柱状图边框颜色
                borderWidth: 1 // 边框宽度
            }]
        },
        options: {
            // 配置图表的标题
            plugins: {
                title: {
                    display: true, // 是否显示标题
                    text: "2023年河北每月中标金额分布", // 标题文本，使用传入的 label 作为标题
                    font: {
                        size: 50, // 字体大小
                        weight: 'bold' // 字体粗细
                    },
                    padding: {
                        top: 20, // 标题顶部留白
                        bottom: 20 // 标题底部留白
                    },
                    color: 'black' // 标题文本颜色
                }
            },
            scales: {
                y: {
                    beginAtZero: true // Y 轴从 0 开始
                }
            }
        }
    });
}
function createRegionalChart4(id, data, type, label) {
    console.log(id, data);
    const ctx = document.getElementById(id).getContext('2d');

    // 创建图表
    const chart = new Chart(ctx, {
        type: type, // 图表类型
        data: {
            labels: data.map(item => item.month), // X 轴标签，取自 data 的 month 属性
            datasets: [{
                label: label, // 数据集的标签
                data: data.map(item => {
                    // 根据数据类型（金额或数量）返回相应的值
                    return parseFloat(item.hasOwnProperty('award_amount') ? item.award_amount : item.award_count);
                }),
                backgroundColor: 'rgba(75, 192, 192, 0.2)', // 柱状图背景颜色
                borderColor: 'rgba(75, 192, 192, 1)', // 柱状图边框颜色
                borderWidth: 1 // 边框宽度
            }]
        },
        options: {
            // 配置图表的标题
            plugins: {
                title: {
                    display: true, // 是否显示标题
                    text: "2023年北京每月中标数量分布", // 标题文本，使用传入的 label 作为标题
                    font: {
                        size: 50, // 字体大小
                        weight: 'bold' // 字体粗细
                    },
                    padding: {
                        top: 20, // 标题顶部留白
                        bottom: 20 // 标题底部留白
                    },
                    color: 'black' // 标题文本颜色
                }
            },
            scales: {
                y: {
                    beginAtZero: true // Y 轴从 0 开始
                }
            }
        }
    });
}
function createRegionalChart5(id, data, type, label) {
    console.log(id, data);
    const ctx = document.getElementById(id).getContext('2d');

    // 创建图表
    const chart = new Chart(ctx, {
        type: type, // 图表类型
        data: {
            labels: data.map(item => item.month), // X 轴标签，取自 data 的 month 属性
            datasets: [{
                label: label, // 数据集的标签
                data: data.map(item => {
                    // 根据数据类型（金额或数量）返回相应的值
                    return parseFloat(item.hasOwnProperty('award_amount') ? item.award_amount : item.award_count);
                }),
                backgroundColor: 'rgba(75, 192, 192, 0.2)', // 柱状图背景颜色
                borderColor: 'rgba(75, 192, 192, 1)', // 柱状图边框颜色
                borderWidth: 1 // 边框宽度
            }]
        },
        options: {
            // 配置图表的标题
            plugins: {
                title: {
                    display: true, // 是否显示标题
                    text: "2023年天津每月中标数量分布", // 标题文本，使用传入的 label 作为标题
                    font: {
                        size: 50, // 字体大小
                        weight: 'bold' // 字体粗细
                    },
                    padding: {
                        top: 20, // 标题顶部留白
                        bottom: 20 // 标题底部留白
                    },
                    color: 'black' // 标题文本颜色
                }
            },
            scales: {
                y: {
                    beginAtZero: true // Y 轴从 0 开始
                }
            }
        }
    });
}
function createRegionalChart6(id, data, type, label) {
    console.log(id, data);
    const ctx = document.getElementById(id).getContext('2d');

    // 创建图表
    const chart = new Chart(ctx, {
        type: type, // 图表类型
        data: {
            labels: data.map(item => item.month), // X 轴标签，取自 data 的 month 属性
            datasets: [{
                label: label, // 数据集的标签
                data: data.map(item => {
                    // 根据数据类型（金额或数量）返回相应的值
                    return parseFloat(item.hasOwnProperty('award_amount') ? item.award_amount : item.award_count);
                }),
                backgroundColor: 'rgba(75, 192, 192, 0.2)', // 柱状图背景颜色
                borderColor: 'rgba(75, 192, 192, 1)', // 柱状图边框颜色
                borderWidth: 1 // 边框宽度
            }]
        },
        options: {
            // 配置图表的标题
            plugins: {
                title: {
                    display: true, // 是否显示标题
                    text: "2023年河北每月中标数量分布", // 标题文本，使用传入的 label 作为标题
                    font: {
                        size: 50, // 字体大小
                        weight: 'bold' // 字体粗细
                    },
                    padding: {
                        top: 20, // 标题顶部留白
                        bottom: 20 // 标题底部留白
                    },
                    color: 'black' // 标题文本颜色
                }
            },
            scales: {
                y: {
                    beginAtZero: true // Y 轴从 0 开始
                }
            }
        }
    });
}
function createRegionalMonthlyChart(id, data, type) {
    const ctx = document.getElementById(id).getContext('2d');
    const chart = new Chart(ctx, {
        type: type,
        data: {
            labels: data.map(item => item.month),
            datasets: [
                {
                    label: 'Region 1 Award Amount',
                    data: data.map(item => parseFloat(item.region_1_award_amount) || 0),
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Region 2 Award Amount',
                    data: data.map(item => parseFloat(item.region_2_award_amount) || 0),
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Region 3 Award Amount',
                    data: data.map(item => parseFloat(item.region_3_award_amount) || 0),
                    backgroundColor: 'rgba(255, 206, 86, 0.2)',
                    borderColor: 'rgba(255, 206, 86, 1)',
                    borderWidth: 1
                },
                // 添加新的数据集来处理奖励计数
                {
                    label: 'Region 1 Award Count',
                    data: data.map(item => parseInt(item.region_1_award_count, 10) || 0), // 使用parseInt并指定基数为10来处理可能的数字字符串
                    backgroundColor: 'rgba(75, 192, 192, 0.2)', // 使用不同的颜色以区分
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1,
                    // 你可以添加额外的配置，比如yAxisID来指定这个数据集应该使用哪个y轴（如果图表有多个y轴的话）
                    // yAxisID: 'y-axis-1', // 示例，实际使用时需要根据你的图表配置来设置
                },
                {
                    label: 'Region 2 Award Count',
                    data: data.map(item => parseInt(item.region_2_award_count, 10) || 0),
                    backgroundColor: 'rgba(153, 102, 255, 0.2)',
                    borderColor: 'rgba(153, 102, 255, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Region 3 Award Count',
                    data: data.map(item => parseInt(item.region_3_award_count, 10) || 0),
                    backgroundColor: 'rgba(255, 159, 64, 0.2)',
                    borderColor: 'rgba(255, 159, 64, 1)',
                    borderWidth: 1
                }
            ]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                }
            },

        }
    });
}

function createChart1(id, data, type) {
    const ctx = document.getElementById(id).getContext('2d');
    const chart = new Chart(ctx, {
        type: type, // 这里可以传入 'bar', 'line', 'pie' 等类型，但注意饼图需要单独处理
        data: {
            labels: data.map(item => item.region),
            datasets: [
                {
                    label: 'Project Count',
                    data: data.map(item => parseFloat(item.project_count)),
                    backgroundColor: ['rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(54, 162, 235, 0.2)'],
                    borderColor: ['rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 99, 132, 1)', 'rgba(255, 205, 86, 1)', 'rgba(54, 162, 235, 1)'],
                    borderWidth: 1
                },
                {
                    label: 'Total Award Amount',
                    data: data.map(item => parseFloat(item.total_award_amount)),
                    backgroundColor: ['rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(54, 162, 235, 0.2)'],
                    borderColor: ['rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 99, 132, 1)', 'rgba(255, 205, 86, 1)', 'rgba(54, 162, 235, 1)'],
                    borderWidth: 1
                }
            ]
        },
        options: {
            // 根据需要添加其他配置选项，比如响应式、标题、图例等
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            plugins: {
                title: {
                    display: true, // 是否显示标题
                    text: '京津冀三地中标数量饼图', // 标题文本
                    font: {
                        size: 50, // 字体大小
                        weight: 'bold' // 字体粗细
                    },
                    padding: {
                        top: 20, // 标题顶部留白
                        bottom: 20 // 标题底部留白
                    },
                    color: 'black' // 标题文本颜色
                }
            }
        }
    });
}

function createChart2(id, data, type) {
    const ctx = document.getElementById(id).getContext('2d');
    const chart = new Chart(ctx, {
        type: type, // 这里可以传入 'bar', 'line', 'pie' 等类型，但注意饼图需要单独处理
        data: {
            labels: data.map(item => item.region),
            datasets: [
                {
                    label: 'Project Count',
                    data: data.map(item => parseFloat(item.project_count)),
                    backgroundColor: ['rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(54, 162, 235, 0.2)'],
                    borderColor: ['rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 99, 132, 1)', 'rgba(255, 205, 86, 1)', 'rgba(54, 162, 235, 1)'],
                    borderWidth: 1
                },
                {
                    label: 'Total Award Amount',
                    data: data.map(item => parseFloat(item.total_award_amount)),
                    backgroundColor: ['rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(54, 162, 235, 0.2)'],
                    borderColor: ['rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 99, 132, 1)', 'rgba(255, 205, 86, 1)', 'rgba(54, 162, 235, 1)'],
                    borderWidth: 1
                }
            ]
        },
        options: {
            // 根据需要添加其他配置选项，比如响应式、标题、图例等
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            plugins: {
                title: {
                    display: true, // 是否显示标题
                    text: '京津冀三地中标金额饼图分布', // 标题文本
                    font: {
                        size: 50, // 字体大小
                        weight: 'bold' // 字体粗细
                    },
                    padding: {
                        top: 20, // 标题顶部留白
                        bottom: 20 // 标题底部留白
                    },
                    color: 'black' // 标题文本颜色
                }
            }
        }
    });
}


        const region1_amount_data = {{ region1_amount_data|safe }};
        const region2_amount_data = {{ region2_amount_data|safe }};
        const region3_amount_data = {{ region3_amount_data|safe }};
        const region_monthly_amount_data = {{ region_monthly_amount_data|safe }};
        const region1_count_data = {{ region1_count_data|safe }};
        const region2_count_data = {{ region2_count_data|safe }};
        const region3_count_data = {{ region3_count_data|safe }};
        const region_monthly_count_data = {{ region_monthly_count_data|safe }};
        const regionproject_count_data = {{regionproject_count_data|safe }};
        const regionawardamount_data = {{regionawardamount_data|safe }};


        createRegionalChart1('region1_amount_chart', region1_amount_data, 'bar');
        createRegionalChart2('region2_amount_chart', region2_amount_data, 'bar');
        createRegionalChart3('region3_amount_chart', region3_amount_data, 'bar');
        createRegionalMonthlyChart('region_monthly_amount_chart', region_monthly_amount_data, 'bar');
        createRegionalChart4('region1_count_chart', region1_count_data, 'bar');
        createRegionalChart5('region2_count_chart', region2_count_data, 'bar');
        createRegionalChart6('region3_count_chart', region3_count_data, 'bar');
        createRegionalMonthlyChart('region_monthly_count_chart', region_monthly_count_data, 'bar');
        createChart1('regionproject_count_data', regionproject_count_data, 'pie');
        createChart2('regionawardamount_data', regionawardamount_data, 'pie');
    </script>
</body>
</html>